import React, { Component } from 'react'
import {
  View,
  Text,
  StyleSheet,
  TextInput
} from 'react-native'
import ScrollableTabView, { ScrollableTabBar } from 'react-native-scrollable-tab-view2'
import NavigationBar from '../commom/navigation-bar'
import DataRepository from '../expand/dao/data-repository'
import RepositoryCell from '../commom/repository-cell'

const URL = 'https://api.github.com/search/repositories?q='
const QUERY_STR = '&sort=stars'

export default class extends Component {
  constructor(props) {
    super(props)
    this.dataRespository = new DataRepository()
    this.state = {
      result: ''
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <NavigationBar title={'最热'}/>
        <ScrollableTabView
          tabBarUnderlineStyle={{backgroundColor: '#e7e7e7', height: 2}}
          tabBarInactiveTextColor='mintcream'
          tabBarActiveTextColor='white'
          ref="scrollableTabView"
          tabBarBackgroundColor="#2196F3"
          initialPage={0}
          renderTabBar={() =>
            <ScrollableTabBar
              style={{height: 40, borderWidth: 0, elevation: 2}}
              tabStyle={{height: 39}}
            />
          }
        >
          <PopularTab tabLabel={'Java'}/>
          <PopularTab tabLabel={'Java'}/>
        </ScrollableTabView>
      </View>
    )
  }
}

class PopularTab extends Component {
  constructor(props) {
    super(props)
    this.dataRespository = new DataRepository()
    this.state = {result: ''}
  }

  _loadData() {
    this.dataRespository
      .fetchNetRepository(this._genFetchUrl(this.props.tabLabel))
      .then(result => {
        this.setState({
          result: result.items[0]
        })
      })
      .catch(error => console.warn(error))
  }

  _genFetchUrl(key) {
    return URL + key + QUERY_STR
  }

  componentDidMount() {
    this._loadData()
  }
  render() {
    return (
      <View style={styles.container}>
        {this.state.result ? <RepositoryCell data={this.state.result}/> : null }
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  }
})
